<template>
  <el-form :inline="true" :model="formInline" class="demo-form-inline">
    <el-form-item label="单据编号">
      <el-input v-model="formInline.document_number" placeholder="请输入单据编号" clearable />
    </el-form-item>
    <el-form-item label="商品信息">
      <el-input v-model="formInline.product_name" placeholder="请输入商品信息" clearable />
    </el-form-item>
    <el-form-item label="单据日期">
      <el-date-picker v-model="formInline.kdate" type="date" placeholder="开始日期" value-format="YYYY-MM-DD" clearable />~
      <el-date-picker v-model="formInline.edate" type="date" placeholder="结束日期" value-format="YYYY-MM-DD" clearable />
    </el-form-item>
    <el-form-item>
      <el-button type="primary" @click="gettableData">查询</el-button>
      <el-button @click="kannoFn">重置</el-button>&nbsp;&nbsp;&nbsp;&nbsp;
      <el-dropdown>
        <span v-if="queryShow == false" @click="changeQueryShow(true)" class="el-dropdown-link">
          展开<el-icon class="el-icon--right"><arrow-down /></el-icon>
        </span>
        <span v-else @click="changeQueryShow(false)" class="el-dropdown-link">
          收起<el-icon class="el-icon--right"><arrow-up /></el-icon>
        </span>
      </el-dropdown>
    </el-form-item>
    <div v-show="queryShow">
      <el-form-item label="供应商">
        <el-select v-model="formInline.supplierId" placeholder="请选择" clearable>
          <el-option v-for="item in supplierInfo" :key="item.supplierId" :label="item.supplier"
            :value="item.supplierId" />
        </el-select>
      </el-form-item>
      <el-form-item label="操作员">
        <el-select v-model="formInline.userId" placeholder="请选择" clearable>
          <el-option v-for="item in userInfo" :key="item.userId" :label="item.login_name" :value="item.userId" />
        </el-select>
      </el-form-item>
      <el-form-item label="单据状态">
        <el-select v-model="formInline.status" placeholder="请选择" clearable>
          <el-option label="未审核" :value="false" />
          <el-option label="已审核" :value="true" />
        </el-select>
      </el-form-item>
      <el-form-item label="单据备注">
        <el-input v-model="formInline.remark" placeholder="请输入单据备注" clearable />
      </el-form-item>
    </div>

  </el-form>
  <!-- <el-button type="primary" :icon="Plus" @click="centerDialogVisible = true">新增</el-button> -->
  <el-button :icon="Delete" @click="rangedel">删除</el-button>
  <el-table :data="tableData" border style="width: 100%" @selection-change="handleSelectionChange">
    <el-table-column type="selection" width="55" />
    <el-table-column label="操作" align="center">
      <template v-slot="script">
        <el-link type="primary" @click="del(script.row.purchaseOrderid)">删除</el-link>
      </template>
    </el-table-column>
    <el-table-column prop="supplier" label="供应商" align="center" />
    <el-table-column prop="document_number" label="单据编号" align="center" />
    <el-table-column prop="product_name" label="商品信息" align="center" />
    <el-table-column prop="document_date" label="单据日期" align="center">
      <template v-slot="script">
        {{ moment(script.row.document_date).format('YYYY-MM-DD HH:mm:ss') }}
      </template>
    </el-table-column>
    <el-table-column prop="login_name" label="操作员" align="center" />
    <el-table-column prop="quantity" label="数量" align="center" />
    <el-table-column prop="sumprice" label="金额合计" align="center" />
    <el-table-column prop="tax_last_money" label="含税合计" align="center" />
    <el-table-column prop="deposit" label="支付定金" align="center" />
    <el-table-column prop="remark" label="备注" align="center" />
    <el-table-column prop="status" label="状态" align="center">
      <template v-slot="script">
        <el-tag type="danger" v-if="script.row.status == false">未审核</el-tag>
        <el-tag type="success" v-else>已审核</el-tag>
      </template>
    </el-table-column>
  </el-table>

  <!-- 分页 -->
  <el-pagination v-model:current-page="page.pageIndex" v-model:page-size="page.pageSize" :page-sizes="[10, 15, 20, 30]"
    :background="false" layout="total, prev, pager, next, sizes, jumper" :total="page.totalCount"
    @size-change="handleSizeChange" @current-change="handleCurrentChange" />
</template>
<script setup lang="ts">
import { GetSupplierInfo, GetUserInfo, GetPurchaseOrderShow, DeletePurchaseOrder, RangeDeletePurchaseOrder } from '@/api/Requisitions/index'
import { type DelPurchaseList, type purchaseinput } from '@/api/Requisitions/type'
import { ref, reactive, onMounted } from "vue"
import { Plus, Delete } from '@element-plus/icons-vue'
import moment from 'moment'
import { ElMessage, ElMessageBox } from 'element-plus'


onMounted(() => {
  getsupplierInfo();
  getuserInfo();
  gettableData();
})
//重置
function kannoFn() {
  location.reload()
}
//分页条件
const page = reactive({
  pageSize: 10,
  pageIndex: 1,
  totalCount: 0,
  totalPage: 0
})

const queryShow = ref(false)
const changeQueryShow = (val: any) => {
  queryShow.value = val
}

//查询条件
const formInline = reactive<purchaseinput>({
  pageSize: page.pageSize,
  pageIndex: page.pageIndex,
  document_number: "",
  product_name: "",
  kdate: "",
  edate: "",
  supplierId: null,
  userId: null,
  status: null,
  remark: ""
})
//绑定供应商
const supplierInfo: any = ref([])
const getsupplierInfo = async () => {
  await GetSupplierInfo().then(res => {
    supplierInfo.value = res.data;
  })
}
//绑定操作员
const userInfo: any = ref([])
const getuserInfo = async () => {
  await GetUserInfo().then(res => {
    userInfo.value = res.data;
  })
}
//显示
const tableData = ref([])
const gettableData = async () => {
  await GetPurchaseOrderShow(formInline).then(function (res) {
    console.log(res.data);
    tableData.value = res.data.data;
    page.totalCount = res.data.totalCount;
    page.totalPage = res.data.totalPage
  })
}
//更改页容量
const handleSizeChange = (val: number) => {
  formInline.pageSize = val;
  gettableData();
}
//跳转第几页
const handleCurrentChange = (val: number) => {
  formInline.pageIndex = val;
  gettableData();
}
//多选
const check = ref([])
const handleSelectionChange = (val: []) => {
  check.value = val
}
//单删
const del = async (dal: any) => {
  await DeletePurchaseOrder(dal).then(function (res) {
    if (res.data > 0) {
      ElMessage.success("删除成功");
      gettableData();
    } else {
      ElMessage.error("删除失败");
    }
  })
}
//批删
const niuma: any = reactive<DelPurchaseList>({
  ids: []
})
const rangedel = () => {
  if (check.value.length <= 0) {
    ElMessage.error("至少选择一项");
    return;
  }
  ElMessageBox.confirm(
    '确认删除吗?',
    'Warning',
    {
      confirmButtonText: '确认',
      cancelButtonText: '取消',
      type: 'warning',
    }
  )
    .then(async () => {
      niuma.ids = check.value.map((ele: any) => ele.purchaseOrderid);
      await RangeDeletePurchaseOrder(niuma.ids).then(function (res) {
        if (res.data > 0) {
          ElMessage.success("删除成功");
          gettableData();
        } else {
          ElMessage.error("删除失败");
        }
      })
    })
    .catch(() => {
      ElMessage({
        type: 'info',
        message: '取消操作',
      })
    })
}
</script>
<style>
.demo-form-inline .el-input {
  --el-input-width: 220px;
}

.demo-form-inline .el-select {
  --el-select-width: 220px;
}

.el-row {
  margin-bottom: 20px;
}

.el-row:last-child {
  margin-bottom: 0;
}

.el-col {
  border-radius: 4px;
}

.el-dropdown-link {
  cursor: pointer;
  color: var(--el-color-primary);
  display: flex;
  align-items: center;
}
</style>